//初始化
function init() {
    var target1 = document.getElementById('once');
    var target2 = document.getElementById('fiveTimes');
    var target3 = document.getElementById('infinity');
    var tween1 = new TWEEN.Tween(target1.dataset).to({rotation: 360}, 2000).repeat(1).delay(1000).onUpdate(function(obj){updateBox(target1, obj.rotation)}).start();
    var tween2 = new TWEEN.Tween(target2.dataset).to({rotation: 360}, 2000).repeat(5).delay(1000).onUpdate(function(obj){updateBox(target2, obj.rotation)}).start();
    var tween3 = new TWEEN.Tween(target3.dataset).to({rotation: 360}, 2000).repeat(Infinity).delay(1000).onUpdate(function(obj){updateBox(target3, obj.rotation)}).start();
}

//处理函数
function updateBox(target, rotation) {
    var rotation = `rotate(${rotation}deg)`;
    target.style.transform = rotation;
}

//动画函数
function animate(time) {
    var id = requestAnimationFrame(animate);
    var result = TWEEN.update(time);
    if(!result) TWEEN.removeAll();
}

init();
animate();